<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>容器应用-宿主机-监控</title>

    <link rel="stylesheet" href="../../plugins/fontawesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../../plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
    <link rel="stylesheet" href="../../plugins/chart.js/Chart.min.css">
    <link rel="stylesheet" href="../../adminLTE/css/adminlte.min.css">
    <link rel="stylesheet" href="../css/cloud.css">
</head>
<body class="content-wrapper" style="padding: 15px">
<div class="row">
    <div class="col-md-4">
        <div class="card card-info card-outline">
            <div class="card-header">
                <h3 class="card-title"><i class="far fa-chart-bar"></i>CPU利用率 %</h3>
            </div>
            <div class="card-body">
                <canvas id="cpu-donut" style="min-height: 200px; height: 200px; max-height: 200px; max-width: 100%;"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="card card-info card-outline">
            <div class="card-header">
                <h3 class="card-title"><i class="far fa-chart-bar"></i>CPU利用率 %</h3>
            </div>
            <div class="card-body">
                <canvas id="cpu-line" style="min-height: 200px; height: 200px; max-height: 200px; max-width: 100%;"></canvas>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="card card-info card-outline">
            <div class="card-header">
                <h3 class="card-title"><i class="far fa-chart-bar"></i>内存利用率 MB</h3>
            </div>
            <div class="card-body">
                <canvas id="mem-donut" style="min-height: 200px; height: 200px; max-height: 200px; max-width: 100%;"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="card card-info card-outline">
            <div class="card-header">
                <h3 class="card-title"><i class="far fa-chart-bar"></i>内存利用率 MB</h3>
            </div>
            <div class="card-body">
                <canvas id="mem-line" style="min-height: 200px; height: 200px; max-height: 200px; max-width: 100%;"></canvas>
            </div>
        </div>
    </div>
</div>

<script src="../../plugins/jquery/jquery.min.js"></script>
<script src="../../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../../plugins/chart.js/Chart.min.js"></script>
<script src="../../adminLTE/js/adminlte.min.js"></script>
<script src="../js/common.js"></script>
<script src="../js/child.js"></script>
<script>
    var params = Utils.getParams(location.href);
    var serverId = params["serverId"];
    var id = params["id"];

    var donutOptions = {
        maintainAspectRatio: false,
        responsive: true,
        legend: {
            display: false
        }
    }

    var lineOptions = {
        maintainAspectRatio : false,
        responsive: true,
        legend: {
            display: false
        },
        datasetFill: true,
        scales: {
            xAxes: [{
                gridLines : {
                    display : false,
                }
            }],
            yAxes: [{
                gridLines : {
                    display : false,
                }
            }]
        }
    }

    var chartCpuDonut = undefined;
    var chartCpuLine = undefined;
    var chartMemDonut = undefined;
    var chartMemLine = undefined;

    function refresh() {
        $.ajax({
            url: Url.dockerService.dockerContainerCpuDonut.replace("{id}", id) + "?serverId=" + serverId,
            type: HttpMethod.get,
            success: function (result, status, xhr) {
                if (!chartCpuDonut) {
                    chartCpuDonut = new Chart($('#cpu-donut').get(0).getContext('2d'), {
                        type: 'doughnut',
                        data: result,
                        options: donutOptions
                    })
                } else {
                    chartCpuDonut.data.datasets = result.datasets;
                    chartCpuDonut.update();
                }
            }
        });

        $.ajax({
            url: Url.dockerService.dockerContainerMemoryDonut.replace("{id}", id) + "?serverId=" + serverId,
            type: HttpMethod.get,
            success: function (result, status, xhr) {
                if (!chartMemDonut) {
                    chartMemDonut = new Chart($('#mem-donut').get(0).getContext('2d'), {
                        type: 'doughnut',
                        data: result,
                        options: donutOptions
                    })
                } else {
                    chartMemDonut.data.datasets = result.datasets;
                    chartMemDonut.update();
                }
            }
        });

        $.ajax({
            url: Url.dockerService.dockerContainerCpuLine.replace("{id}", id) + "?serverId=" + serverId+"&second=60",
            type: HttpMethod.get,
            success: function (result, status, xhr) {
                if (!chartCpuLine) {
                    chartCpuLine = new Chart($('#cpu-line').get(0).getContext('2d'), {
                        type: 'line',
                        data: result,
                        options: lineOptions
                    })
                } else {
                    chartCpuLine.data.datasets[0].data = result.datasets[0].data;
                    chartCpuLine.data.labels = result.labels;
                    chartCpuLine.update();
                }
            }
        });

        $.ajax({
            url: Url.dockerService.dockerContainerMemoryLine.replace("{id}", id) + "?serverId=" + serverId+"&second=60",
            type: HttpMethod.get,
            success: function (result, status, xhr) {
                if (!chartMemLine) {
                    chartMemLine = new Chart($('#mem-line').get(0).getContext('2d'), {
                        type: 'line',
                        data: result,
                        options: lineOptions
                    })
                } else {
                    chartMemLine.data.datasets[0].data = result.datasets[0].data;
                    chartMemLine.data.labels = result.labels;
                    chartMemLine.update();
                }
            }
        });
    }

    refresh();

    setInterval(refresh, 5000);


</script>
</body>
</html>